<template>
    <div>
        <div style="backgroud:#fff">
            <el-form-item label="角色名称">
                <el-input v-model="roleName" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="initData">
                    搜索
                </el-button>
                <el-button size="small" @click="reset">重置</el-button>
            </el-form-item>
            <div>
                <el-button type="success" size="small" @click="showDialog">
                    添加
                </el-button>
            </div>
        
        </div>

        <el-table :data="roles" stripe style="width: 100%">
            <el-table-column prop="roleName" label="角色名称" width="180" />
            <el-table-column prop="roleCode" label="角色code" width="180" />
            <el-table-column prop="createTime" label="创建时间" />

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="edit( scope.row)">
                        修改
                    </el-button>
                    <el-button
                               size="small"
                               type="danger"
                               @click="deletes(scope.row)"
                               >
                        删除
                    </el-button>
                    <el-button
                               size="small"
                               type="warning"
                               @click="handleShowAssignMenuDialog(scope.row)"
                               >
                        分配菜单
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top:50px">
            <el-pagination
                           v-model:current-page="pageNum"
                           v-model:page-size="pageSize"
                           :page-sizes="[1, 2, 3, 4]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           />
        </div>
        <div>
            <el-dialog v-model="dialogFormVisible" :title="title">
                <el-form>
                    <el-form-item label="角色名称" :label-width="formLabelWidth">
                        <el-input v-model="sysRole.roleName" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="角色code" :label-width="formLabelWidth">
                        <el-input v-model="sysRole.roleCode" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="角色介绍" :label-width="formLabelWidth">
                        <el-input v-model="sysRole.description" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="addOrUpdate">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <div>
    <el-dialog v-model="dialogAssignMenuVisible" title="分配菜单">
        <div>
            <el-tree
                     :data="menus"
                     ref="menuTree"
                     show-checkbox
                     node-key="id"
                     :default-expand-all="true"
                     :default-checked-keys="checkedMenuIds"
                     :props="defaultProps"
                     />
        </div>

        <template #footer>
            <span class="dialog-footer" style="text-align:center">
                <el-button @click="dialogAssignMenuVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="handleAssignMenus2Role">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</div>
    </div>
</template>
<script setup>
    import { ref,onMounted } from 'vue'
    import {selectRoles,addRole,deleteRole,updateRole,assignMenus2Role} from '@/api/sysRole'
    import { listNestedMenus, getMenuIdsByRoleId } from '@/api/sysMenu'
    import { ElMessage,ElMessageBox } from 'element-plus'
    const checkedMenuIds = ref([])
    const menus = ref([])
    const dialogAssignMenuVisible = ref(false)

    const handleShowAssignMenuDialog = async row => {
        menus.value=[]
        checkedMenuIds.value=[]
        const{data}=await listNestedMenus()
        menus.value=data
        sysRole.value = row
        const result=await getMenuIdsByRoleId(row.id)
        checkedMenuIds.value=result.data
        

        dialogAssignMenuVisible.value = true
    }

    const defaultProps={
        children:'children',
        label:'title'
    }
    const menuTree = ref()
    const handleAssignMenus2Role = async () => {
        const checkedKeys=menuTree.value.getCheckedKeys()
        const halfCheckedKeys=menuTree.value.getHalfCheckedKeys()
        const menuIds=[...checkedKeys,...halfCheckedKeys]
        await assignMenus2Role(menuIds,sysRole.value.id)
        ElMessage.success('分配成功')
        dialogAssignMenuVisible.value=false
    }

    const roleName = ref('')

    const pageNum = ref(1)
    const pageSize = ref(3)
    const total = ref(30)
    let reset = () => {
        pageNum.value = 1
        pageSize.value = 3
        roleName.value = ''
        initData()
    }
    const handleSizeChange = (val) => {
        pageSize.value=val
        initData()

    }
    const handleCurrentChange = (val) => {
        pageNum.value=val
        initData()
    }
    const roles = ref([])

onMounted(()=>{
    initData()
})
let initData=async()=>{
   let {data,code,message}=await selectRoles(pageNum.value,pageSize.value,roleName.value)
         total.value=data.total
         roles.value=data.list
}

let dialogFormVisible=ref(false)
let sysRole=ref({})
let title = ref('')
let showDialog=()=>{
    title.value = '添加角色'
    sysRole.value={}
    dialogFormVisible.value=true

}

let add=async()=>{
    await addRole(sysRole.value)
    ElMessage.success('添加成功')
    dialogFormVisible.value=false
    initData()
}

let edit=async(row)=>{
    
    sysRole.value=row
    title.value='更新角色'
    dialogFormVisible.value=true
}
let update=async()=>{
await updateRole(sysRole.value)
ElMessage.success('更新成功')
dialogFormVisible.value=false

}

let addOrUpdate=()=>{
    if(sysRole.value.id){
        update()
    }else{
        add()
    }

}

let deletes=(row)=>{
    ElMessageBox.confirm(
    '确定删除该角色吗？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        await deleteRole(row.id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      initData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

</script>